import React, { Component } from 'react'
import { ListWrapper, ListItem } from '../style'
import { connect } from 'react-redux'

class List extends Component {
  render() {
    const { list } = this.props
    return (
      <ListWrapper>
        {list.map(item => {
          return (
            <ListItem key={item.get('id')}>
              <img
                className="list-img"
                alt=""
                src={item.get('img')}
              />
              <div className="list-content">
                <h3 className="list-title">{item.get('title')}</h3>
                <p className="list-abstract">
                  {item.get('abstract')}
                </p>
              </div>
            </ListItem>
          )
        })}
      </ListWrapper>
    )
  }
}
const mapStateToProps = state => ({
  list: state.getIn(['home', 'articleList'])
})
export default connect(
  mapStateToProps,
  null
)(List)
